{extend name="public/base" /}

{block name="title"}<title>活动信息</title>{/block}

{block name="pjax_container"}
<section class="content-header">
    <h1>活动信息</h1>
    <ol class="breadcrumb">
        <li class="active"><i class="fa fa-dashboard"></i> 活动信息</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="{:url('edit')}" onsubmit="return false">
                <input type="hidden" name="id" value="{$info.id|default=0}" />
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">活动标题</label>
                                <div class="col-sm-7">
                                    <input class="form-control" name="title" value="{$info.title}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">活动报名起止时间</label>
                                <div class="col-sm-7">
                                    <input type="date" name="apply_start_time" value="{$info.apply_start_time_str}"> 至
                                    <input type="date" name="apply_end_time" value="{$info.apply_end_time_str}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">活动进行起止时间</label>
                                <div class="col-sm-7">
                                    <input type="date" name="start_time" value="{$info.start_time_str}"> 至
                                    <input type="date" name="end_time" value="{$info.end_time_str}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">活动地点</label>
                                <div class="col-sm-7">
                                    <input class="form-control" name="addr" value="{$info.addr}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">报名人数</label>
                                <div class="col-sm-7">
                                    <input type="number" class="form-control" name="num" value="{$info.num}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">最大报名人数</label>
                                <div class="col-sm-7">
                                    <input type="number" class="form-control" name="max_num" value="{$info.max_num}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">顶部轮播图片</label>
                                <div class="col-sm-7 upload-box">
                                    <div class="image-box clear">
                                        {volist name="$info['ImagesArr']" id="v"}
                                        <section class="image-section">
                                            <div class="image-shade"></div>
                                            <div class="image-delete"></div>
                                            <img class="image-show" src="{$v}" />
                                            <input name="images[]" value="{$v}" type="hidden" />
                                        </section>
                                        {/volist}
                                        <section class="upload-section">
                                            <div class="upload-btn"></div>
                                            <input type="file" name="file" set-name="images" id="upload-input" value=""/>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">活动说明</label>
                                <div class="col-sm-7"><textarea class="form-control" name="content">{$info.content}</textarea></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">签到二维码</label>
                                <div class="col-sm-7" style="padding-top:7px;">
                                    <a href="javascript:show_code(1);">点击查看</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">签退二维码</label>
                                <div class="col-sm-7" style="padding-top:7px;">
                                    <a href="javascript:show_code(2);">点击查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-7">
                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script type="text/javascript">

    $("#upload-input").ajaxImageUpload({
        url: "{:url('File/store')}", //上传的服务器地址
        // data: { name:'勾国印' },
        data:{},
        maxNum: 5, //允许上传图片数量
        zoom: false, //允许放大
        allowType: ["gif", "jpeg", "jpg", "bmp",'png','zip'], //允许上传图片的类型
        maxSize :2, //允许上传图片的最大尺寸，单位M
        callbackFieldName:'saveName',
        before: function () {
            // alert('上传前回调函数');
        },
        success:function(data){
            // alert('上传成功回调函数');
            // console.log(data);
        },
        error:function (e) {
            // alert('上传失败回调函数');
            // console.log(e);
        }
    });

    KindEditor.create('textarea[name="content"]',{
        width : '100%',   //宽度
        height : '320px',   //高度
        resizeType : '0',   //禁止拖动
        allowFileManager : false,   //允许对上传图片进行管理
        uploadJson : '{:url("File/kind_editor_upload")}',   //文件上传地址
        urlType : 'domain',   //带域名的路径
        formatUploadUrl: true,   //自动格式化上传后的URL
        autoHeightMode: false,   //开启自动高度模式
        afterBlur: function () { this.sync(); }   //同步编辑器数据
    });

    $(function(){
        /*ajax页面加载icheck，有该控件的页面才需要*/
        $(".select2").select2({language:"zh-CN"});
    });


    // 点击查看签到二维码
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    var ajax_return = 1;
    var interval_index = '';
    // 定时请求签退二维码
    function ajax_sign_qrcode() {
        var is_show_code = $('.layui-layer-content').html();
        var rand = Math.ceil(Math.random()*10)+new Date().getTime();
        var url = "{:url('edit', ['id'=>$info['id'], 'qrcode'=>1])}";
        if(is_show_code && ajax_return){
            ajax_return = 0;
            $.ajax({
                type:'get',
                url:url,
                timeout:2000,
                dataType:'json',
                success:function(data){
                    var url_a = data.code +'?rand='+rand;
                    var code_html = "<img class='image-show' src='"+url_a+"' style='width:100%;height:100%;'/>";
                    $('.layui-layer-content').html(code_html);
                },
                error : function(xhr,textStatus){
                    layer.alert('请求超时，请关闭二维码后重新打开');
                    clearInterval(interval_index);
                },
                complete:function(xhr, textStatus){
                    ajax_return = 1;
                }
            });
        }
    }
    function show_code(show_type){
        var code_img = '';
        var code_title = '';
        if(show_type == 1){
            code_img = "{$info.sign_in_qrcode}";
            code_title = '签到二维码';
        }else{
            interval_index = setInterval("ajax_sign_qrcode()", 1000);
            code_img = "{$info.sign_out_qrcode}";
            code_title = '签退二维码';
        }
        layer.open({
            title:code_title,
            type: 1,
            area: ['400px', '400px'],
            shade:1,
            shadeClose:true,
            content: "<img class='image-show' src='"+code_img+"' style='width:100%;height:100%;' />",
            end: function(index, layero){
                clearInterval(interval_index);
            }
        });
    }


</script>
{/block}
